<template>
    <div
      class="
        venue-display
        flex flex-direction
        strut-absolute
        padding-top-xl padding-lr-xl padding-bottom-xs
      "
      style="overflow-y: scroll; overflow-x: hidden; height: 100%"
    >
    <el-switch v-model="isCaptain" style="float:right" 
    active-text="队长" inactive-text="队员" inactive-color="#13ce66" 
    @change="roleChange()">

    </el-switch>
    <el-table border :data="data">
        <el-table-column label="赛事名称" prop="contestName" align="center" width="200"></el-table-column>
        <el-table-column label="队伍名称"  align="center" width="200">
          <template slot-scope="scope">
            <el-button type="text" @click="getTeamMembers(scope.row.teamId, scope.row.teamName, scope.row.teamInfo,scope.row.teamDemand)">
            {{ scope.row.teamName }}
          </el-button>
          </template>
        </el-table-column>
        <el-table-column label="队长姓名" prop="captainName"  align="center" width="100"></el-table-column>
        <el-table-column label="队伍介绍" prop="teamInfo"  align="center"></el-table-column>
        <el-table-column label="队伍需求" prop="teamDemand" align="center"></el-table-column>
        <el-table-column label="操作" v-if="isCaptain"  align="center" width="600">
          <template slot-scope="scope">
            <el-button type="primary" @click="viewTeamNotice(scope.row.teamId)">
                查看公告
              </el-button>
              <el-button type="primary"  @click="openAddNoticeDialog(scope.row.teamId)">
                发布公告
              </el-button>
              <el-button type="primary"  @click="getJoinMember(scope.row.teamId)">
                查看入队申请
              </el-button>
              <el-button type="primary" @click="editTeamInfo(scope.row.teamId, scope.row.teamName, scope.row.teamInfo,scope.row.teamDemand)">
                编辑队伍
              </el-button>
              <el-button type="danger"  @click="removeTeam(scope.row.teamId)">
                解散队伍
              </el-button>
          </template>
        </el-table-column>
        <el-table-column v-if="!isCaptain" label="操作" align="center" width="300">
          <template slot-scope="scope">
            <el-button type="primary"  @click="viewTeamNoticeStatus(scope.row.teamId)">
              查看公告
            </el-button>
            <el-button type="danger"  @click="exitTeam(scope.row.teamId)">
              退出队伍
            </el-button>
          </template>
        </el-table-column>
    </el-table>
    <!-- 队伍公告 -->
    <el-dialog :visible.sync="teamNoticeVisiable" title="队伍公告">
      <el-table :show-header="false" :data="teamNoticeList">
        <el-table-column>
          <template slot-scope="scope">
            <el-form>
              <el-form inline="inline">
                <el-form-item >
                  <span style="font-size:20px">
                    {{ scope.row.title }}
                  </span>
                </el-form-item>
                <el-form-item v-if="!isCaptain" style="float: right;">
                  <span v-if="scope.row.status > 0">已读</span>
                  <span v-else>未读</span>
                </el-form-item>
                <el-form-item label="最后修改时间:" style="float: right;">
                  <span>{{ scope.row.updateDate }}</span>
                </el-form-item>
              </el-form>
              <el-form inline:inline>
                <el-form-item style="font-size:16px">
                  <span style="font-size: 16px; white-space:pre-wrap">{{ scope.row.notice }}</span>
                </el-form-item>
                <el-form-item style="float:right;">
                  <el-button v-if="isCaptain" type="primary" @click="getReadStatus(scope.row.noticeId)">查看阅读状态</el-button>
                  <el-button v-if="isCaptain" type="danger" @click="removeNotice(scope.row.noticeId)">删除公告</el-button>
                  <el-button v-if="!isCaptain" type="primary" @click="readTeamNotice(scope.row.noticeId)">标记为已读</el-button>
                </el-form-item>
              </el-form>
            </el-form>
          </template>
        </el-table-column>
      </el-table>
      
    </el-dialog>
    <!-- 发布公告 -->
    <el-dialog style="margin-left: 30%;width: 50%;"
    :visible.sync="createTeamNoticeVisible"
    >
      <el-form label-width="80px"
      v-model="createParam">
        <el-form-item label="公告标题">
        <el-input v-model="createParam.title">

        </el-input>
        </el-form-item>
        <el-form-item label="公告内容">
        <el-input type="textarea" :rows="5"
        v-model="createParam.notice">
        </el-input>
        </el-form-item>
        <el-button style="margin-left: 3%;width: 30%;" @click="cancelDialog">
            取消
        </el-button>
        <el-button style="width: 30%;margin-left: 35%;" @click="createTeamNotice"
        type="primary">
            确认
        </el-button>
      </el-form>
    
    </el-dialog>
    <!-- 公告阅读状态 -->
    <el-dialog :visible.sync="noticeStatusVisable" style="width:50%;margin-left:25%;margin-top: 0%;" title="公告阅读状态">
      <el-table border :data="noticeStatusMember">
        <el-table-column label="队员姓名" prop="username"></el-table-column>
        <el-table-column label="阅读状态" prop="status"></el-table-column>
      </el-table>
    </el-dialog>
    <!-- 队伍成员 -->
    <el-dialog :visible.sync="teamMembersVisible" title="队伍信息" class="teamInfoBOX">
      <span style="margin-top:0px;">
        <h1>{{ currentSelectTeamName }}</h1>
        <h3>队伍介绍：{{ currentSelectTeamInfo }}</h3>
        <h3>队伍需求：{{ currentSelectTeamDemand }}</h3>
      </span>
      <el-table border
      :data="teamMembers">
        <el-table-column label="队员姓名" prop="username"></el-table-column>
        <el-table-column label="入队宣言" prop="joinNote"></el-table-column>
        <el-table-column label="操作" v-if="isCaptain">
          <template slot-scope="scope">
            <el-button type="danger" @click="kickOutMember(scope.row.userId)">踢出队伍</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

    <el-dialog :visible.sync="joinMembersVisible">
      <el-table border
      :data="joinMembers">
        <el-table-column label="队员编号" width="80"
        prop="userId">
        </el-table-column>
        <el-table-column label="队员姓名" prop="username" align="center">
          <template slot-scope="scope">
          <el-button type="text" @click="getUserInfo(scope.row.userId, true)">
          {{ scope.row.username }}
          </el-button>
        </template>
        </el-table-column>
        <el-table-column label="入队宣言" prop="joinNote" align="center"></el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="success" icon="el-icon-check" @click="reviewJoinRequset(1,scope.row.userId)">
              同意
            </el-button>
            <el-button type="warning" icon="el-icon-close" @click="reviewJoinRequset(0,scope.row.userId)">
              拒绝
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <!-- 编辑队伍 -->
    <el-dialog
    style="margin-left: 30%;width: 40%;"
    :visible.sync="editTeamInfoVisable">
      <el-form inline="inline" v-model="editTeamInfoParam">
        <el-form-item label="队伍名称">
          <el-input v-model="editTeamInfoParam.teamName">
          </el-input>
        </el-form-item>
        <el-form-item label="队伍介绍">
          <el-input type="textarea"
          v-model="editTeamInfoParam.teamInfo">
          </el-input>
        </el-form-item>
        <el-form-item label="队伍需求">
          <el-input type="textarea" v-model="editTeamInfoParam.teamDemand">
          </el-input>
        </el-form-item>
          <el-button style="width: 30%;" @click="cancelCreateTeam">取消</el-button>
          <el-button style="margin-left: 20%;" type="primary" @click="editTeam">修改</el-button>
      </el-form>
    </el-dialog>
    </div>
 </template>
 <script>
import {getTeamList,getTeamMembers,getJoinMember,reviewJoinRequset, getTeamNoticeList,addTeamNotice,removeTeamNotice,
  removeTeam, getTeamListAsCaptain, exitTeam, readTeamNotice, getTeamNoticeStatusList, getReadStatus, editTeam, kickOutMember} from '@/api/eventSection'
import iframeBootstrap from 'sockjs-client/lib/iframe-bootstrap';
export default ({
    data() {
    return {
      data: [],
      teamMembers:[],
      joinMembers:[],
      teamNoticeList:[],
      noticeStatusMember: [],
      teamMembersVisible:false,
      joinMembersVisible:false,
      teamNoticeVisiable: false,
      createTeamNoticeVisible: false,
      noticeStatusVisable: false,
      editTeamInfoVisable:false,
      createParam:{
        teamId:'',
        title:'',
        notice:''
      },
      editTeamInfoParam:{
        teamId:'',
        teamName:'',
        teamInfo:'',
        teamDemand:''
      },
      currentSelectTeamId:'',
      currentSelectTeamName:'',
      currentSelectTeamInfo:'',
      isCaptain: true,
      userId:JSON.parse(localStorage.getItem('userInfo')).id
    
    }
  },
  mounted() {
      this.getTeamListAsCaptain()
  },
  methods: {
    getUserInfo(userId, editAble) {
    console.log(userId);
    this.$router.push({
            path:  '/user-info',
            query:{
              userId:userId,
              editAble:editAble
            }
          })
    },
    kickOutMember(userId) {
      kickOutMember(userId, this.currentSelectTeamId).then(res => {
        if(res.data.code == 200) {
          this.$message({
            message: res.data.data,
            type:'success'
          })
          this.getTeamMembers(this.currentSelectTeamId,this.currentSelectTeamName,this.currentSelectTeamInfo,this.currentSelectTeamDemand);
        } else {
          this.$message({
              message:res.data.msg,
              type:'error'
          })
        }
      })
    },
    editTeamInfo(teamId, teamName, teamInfo, teamDemand) {
      this.editTeamInfoVisable = true;
      this.editTeamInfoParam.teamId =  teamId;
      this.editTeamInfoParam.teamName =  teamName;
      this.editTeamInfoParam.teamInfo =  teamInfo;
      this.editTeamInfoParam.teamDemand =  teamDemand;
    },
    editTeam() {
      editTeam(this.editTeamInfoParam).then(res => {
        if(res.data.code == 200) {
          this.$message({
            message: res.data.data,
            type:'success'
          })
          this.editTeamInfoVisable = false;
          this.getTeamListAsCaptain();
        } else {
          this.$message({
              message:res.data.msg,
              type:'error'
          })
        }
      })
    },
    getReadStatus(noticeId) {
      // 查看公告阅读状态
      getReadStatus(noticeId).then(res => {
        if(res.data.code == 200) {
          this.noticeStatusMember = res.data.data;
          this.noticeStatusVisable = true;
        }else {
          this.$message({
              message:res.data.msg,
              type:'error'
          })
        }
      })
    },
    readTeamNotice(noticeId) {
      readTeamNotice(noticeId, this.userId).then(res => {
        if(res.data.code == 200) {
          this.$message({
            message: res.data.data,
            type:'success'
          })
          this.viewTeamNoticeStatus(this.currentSelectTeamId)
        } else {
          this.$message({
              message:res.data.msg,
              type:'error'
          })
          this.viewTeamNoticeStatus(this.currentSelectTeamId)
        }
      })
    },
    openAddNoticeDialog(teamId) {
      this.createParam.teamId = teamId;
      this.createTeamNoticeVisible = true
    },
    removeNotice(noticeId) {
      removeTeamNotice({noticeId:noticeId}).then(res => {
          if(res.data.code === 200){
              this.$message({
                  message:res.data.data,
                  type:'success'
              })
              this.viewTeamNotice(this.currentSelectTeamId)
          }else{
              this.$message({
                  message:res.data.msg,
                  type:'error'
              })
          }
      })
    },
    cancelDialog() {
      this.createTeamNoticeVisible = false;
      this.createParam = {
        teamId:'',
        title:'',
        notice:''
      };
    },
    createTeamNotice() {
      // 发布队伍公告
      addTeamNotice(this.createParam).then(res => {
      if(res.data.code === 200){
          this.$message({
          message:res.data.data,
          type:'success'
          })
          this.createTeamNoticeVisible = false
          this.createParam = {
            teamId:'',
            title:'',
            notice:''
          };
      }else{
          this.$message({
          message:res.data.msg,
          type:'error'
          }) 
      }
  })
    },
    exitTeam(teamId) {
      exitTeam(teamId, this.userId).then(
        res => {
          if(res.data.code == 200) {
            this.$message({
              message:res.data.msg,
              type:'success'
            })
            this.getTeamList();
          } else{
            this.$message({
              message:res.data.msg,
              type:'error'
            })
          }
        }
      )
    },
    removeTeam(teamId) {
      // 解散队伍
      removeTeam({teamId:teamId}).then(res => {
        if(res.data.code === 200){
          this.$message({
            message:res.data.msg,
            type:'success'
          })
          this.getTeamListAsCaptain()
        }else{
          this.$message({
            message:res.data.msg,
            type:'error'
          })
        }
      })
    },
    roleChange() {
      // 角色改变
      console.log(this.isCaptain);
      // 队长: 
      if(this.isCaptain) {
        this.getTeamListAsCaptain();
      } else{
        // 队员: 
        this.getTeamList();

      }

    },
    viewTeamNoticeStatus(teamId) {
      this.currentSelectTeamId = teamId;
      getTeamNoticeStatusList(teamId, this.userId).then(res => {
        if(res.data.code === 200){
                this.teamNoticeList = res.data.data
                console.log(JSON.stringify(this.teamNoticeList));
                this.teamNoticeVisiable = true
            }
      })
    },
    viewTeamNotice(teamId){
      this.currentSelectTeamId = teamId;
        getTeamNoticeList({teamId:teamId}).then(res => {
            if(res.data.code === 200){
                this.teamNoticeList = res.data.data
                console.log(JSON.stringify(this.teamNoticeList));
                this.teamNoticeVisiable = true
            }
        })
    },
    getTeamList(){
        getTeamList({userId:this.userId}).then(res => {
            if(res.data.code === 200){
                this.data = res.data.data
            }
        })
    },
    getTeamListAsCaptain() {
      getTeamListAsCaptain({userId:this.userId}).then(res => {
            if(res.data.code === 200){
                this.data = res.data.data
            }
        })
    },
    getTeamMembers(teamId, teamName, teamInfo, teamDemand){
      this.currentSelectTeamId = teamId;
      this.currentSelectTeamName = teamName;
      this.currentSelectTeamInfo = teamInfo;
      this.currentSelectTeamDemand = teamDemand;
      getTeamMembers({teamId:teamId}).then(res => {
        if(res.data.code === 200){
          this.teamMembers = res.data.data
          this.teamMembersVisible = true
        }
      })
    },
    getJoinMember(teamId){
      this.currentSelectTeamId = teamId
      getJoinMember({teamId:teamId}).then(res => {
        if(res.data.code === 200){
          this.joinMembers = res.data.data
          this.joinMembersVisible = true
        }
      })
    },
    reviewJoinRequset(advice,userId){
      if(advice === 1){
        advice = true
      }
      if(advice === 0){
        advice = false
      }
      reviewJoinRequset(advice,this.currentSelectTeamId,userId).then(res => {
        if(res.data.code === 200){
          this.$message({
            message:res.data.msg,
            type:'success'
          })
          this.joinMembersVisible = false
        }else{
          this.$message({
            message:res.data.msg,
            type:'error'
          })
        }
      })

    }

  }
 })
 </script>
 

<style>
  .teamInfoBOX .el-dialog__body {
    padding-top:0rem;
    margin-top:0px;
  }
</style>